<template>
  <div class="transaction-service-list bg-c-fff right-height mb70">
    <div class="bread">
      <a href="javascript:void(0);" class="font-s-16">法律服务监控员-消息管理</a>
    </div>
    <div class="content">
      <choose-type typename="消息类型" valuename="msgType" :itemlist="typelist" :active="typeActive" @typechanged="onOptionChanged"></choose-type>
      <choose-type typename="读取状态" valuename="readType" :itemlist="readlist" :active="readActive" @typechanged="onOptionChanged"></choose-type>
      <table width="100%" class="auto">
        <tr>
          <th>发送时间</th>
          <th>发送人</th>
          <th>接收人</th>
          <th>读取状态</th>
          <th>消息类型</th>
          <th>操作</th>
        </tr>
        <tr v-for="item in msgList">
          <td>{{item.createTime}}</td>
          <td>{{item.sendName}}</td>
          <td>{{item.reciveName}}</td>
          <td>{{item.readType | readTypeFilter}}</td>
          <td>{{item.messageType | msgTypeFilter}}</td>
          <td>
            <button class="blue-button small-btn-css" @click="onDetailsClick(item)">查看详情</button>
          </td>
        </tr>
      </table>
      <div class="fix foot-box">
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.msgList!=0" @pagechange="onPageChange"></pagination>
      </div>
    </div>
    <vodal :show="msgShow" animation="zoom" :width="350" :height="217" @hide="msgShow=false">
      <div class="vodal-main">
        <h4>查看详情</h4>
        <div class="con">
          <textarea v-model="msgCon"></textarea>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script type="text/javascript">
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    Pagination,
    ChooseType
  },
  data() {
    return {
      pageIndex: 1,
      pageTotal: 0,
      msgShow: false,
      typeActive: '',
      typelist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '接收消息'
      }, {
        value: 0,
        text: '发送消息'
      }],
      readActive: '',
      readlist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '已读'
      }, {
        value: 0,
        text: '未读'
      }],
      msgList: [],
      msgCon: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onOptionChanged(type, value) {
      if (type === 'msgType') {
        this.typeActive = value
      }
      if (type === 'readType') {
        this.readActive = value
      }
      this.getMsgData(1)
    },
    onPageChange(n) {
      this.getMsgData(n)
    },
    getMsgData(n) {
      this.$http.get('/message/query/message', {
        params: {
          userType: 2,
          msgState: this.typeActive,
          readType: this.readActive,
          page: n,
          rows: 10
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.msgList = data.data.rows
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onDetailsClick(item) {
      this.msgShow = true
      this.msgCon = item.msgContent
      if (item.messageType === 1) {
        this.$http.post('/message/modify/read/type', {
          messageId: item.id
        }).then(data => {
          if (data.data.httpCode === 200) {
            item.readType = 1
          } else {
            console.log(data.data.msg)
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  filters: {
    readTypeFilter(v) {
      if (v === 0) {
        return '未读'
      } else if (v === 1) {
        return '已读'
      }
    },
    msgTypeFilter(v) {
      if (v === 0) {
        return '发送'
      } else if (v === 1) {
        return '接收'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.bread {
  padding-left: 20px;
  border-bottom: 1px solid #ddd;
}

.bread .btn-box {
  margin-top: 15px;
  margin-right: 20px;
}

.content {
  margin-top: 25px;
  padding: 0 30px;
}

.foot-box {
  padding: 35px 0px 0px 0px;
}

.vodal-main textarea {
  width: 310px;
  height: 120px;
  padding: 10px;
}

</style>
